<template>
	<view>
		<view class="payall">支付总金额</view>
		<view class="price">￥{{price}}</view>
		<view>
			<view class="item">
				<view class="item_left">
					<image style="width: 66rpx;" src="../../static/pay/zhifubao.png" mode="widthFix"></image>
				</view>
				<view class="item_middle">支付宝支付</view>
				<view class="item_right" @click="checkPay(30)">
					<image style="width: 40rpx;" v-if="payType==30" src="../../static/r-icon/r7.png" mode="widthFix"></image>
					<image style="width: 40rpx;" v-else src="../../static/pay/quan.png" mode="widthFix"></image>
				</view>
			</view>
			<!-- #ifdef APP-PLUS -->
			<!-- <view class="item">
				<view class="item_left">
					<image style="width: 66rpx;" src="../../static/pay/weixin.png" mode="widthFix"></image>
				</view>
				<view class="item_middle">微信支付</view>
				<view class="item_right" @click="checkPay(20)">
					<image style="width: 40rpx;" v-if="payType==20" src="../../static/r-icon/r7.png" mode="widthFix"></image>
					<image style="width: 40rpx;" v-else src="../../static/pay/quan.png" mode="widthFix"></image>
				</view>
			</view> -->
			<!-- #endif -->
			<view class="item">
				<view class="item_left">
					<image style="width: 66rpx;" src="../../static/pay/yunbi.png" mode="widthFix"></image>
				</view>
				<view class="item_middle">余额支付</view>
				<view class="item_right" @click="checkPay(10)">
					<image style="width: 40rpx;" v-if="payType==10" src="../../static/r-icon/r7.png" mode="widthFix"></image>
					<image style="width: 40rpx;" v-else src="../../static/pay/quan.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="payfor" @click="pay">确认支付</view>
		</view>
	</view>
</template>

<script>
	import {
		pay,ptyepay,ptwxpay
	} from '../../api/product.js'
	export default {
		data() {
			return {
				payType: 0, //10 余额  20微信 30 支付宝
				price: 0,
				order: '',
				flag:true,
				orderType:0//0正常订单，10拼团单独购买 20 拼团购买
			}
		},
		onLoad(e) {
			console.log(e)
			this.price = e.price
			this.order = e.order
			if(e.ordertype){
				this.orderType=e.ordertype
			}
			
		},
		onShow() {
			if(this.flag==false){
				uni.switchTab({
					url:"/pages/index/index"
				})
			}
		},
		methods: {
			// 选择支付方式
			checkPay(e) {
				this.payType = e
			},
			// 支付
			async pay() {
				if (this.payType == 0) {
					this.msg("未选择支付方式", "none")
				} else {
					
					uni.showLoading({
						title: '请稍后...'
					});
					let data = {
						orderNo: this.order,
						payType: this.payType,
						orderPrice: this.price
					}
					if(this.orderType>0){
						data.orderType=this.orderType
					}
					
					// 支付宝app的h5支付单独拉个页面发起
					// #ifdef APP-PLUS
					// if(this.payType==30){
					// 	this.flag=false
					// 	uni.hideLoading();
					// 	uni.navigateTo({
					// 		url:"/pages/product/h5paypage?orderNo="+this.order+"&orderPrice="+this.price
					// 	})
						
					// 	return
					// }
					// #endif
					// 根据订单类型选择不同的接口
					let url=pay
					if(this.orderType>0){
						url=ptyepay
					}
					let res = await this.get(url, data)
					// 余额支付
					if (this.payType == 10) {
						let tourl='/pages/product/paysuccess?type=1&price=' + this.price + "&code=" + this.order
						if(this.orderType>0){
							tourl='/pages/product/paysuccess?type=1&price=' + this.price + "&code=" + this.order+"&orderType=1"
						}
						uni.navigateTo({
							url:tourl
						})
						return
					}
					
					// #ifdef H5
					console.log(res.data.resultValue)
					this.flag=false
					//后端返回的数据类似一个form表单，创建一个div后执行表单的submit就OK了
					const div = document.createElement('div')
					div.id = 'alipay'
					div.innerHTML = res.data.resultValue.body
					document.body.appendChild(div)
					document.querySelector('#alipay').children[0].submit()//执行后会唤起支付宝
					// #endif
					// #ifdef APP-PLUS
					if (this.payType == 20) {
						console.log("", JSON.stringify(res.data))
						uni.requestPayment({
							provider: 'wxpay',
							orderInfo: JSON.stringify(res.data), //微信订单数据
							success: (res) => {
								console.log('success:', res);
								let tourl='/pages/product/paysuccess?type=1&price=' + this.price + "&code=" + this.order
								if(this.orderType>0){
									tourl='/pages/product/paysuccess?type=1&price=' + this.price + "&code=" + this.order+"&orderType=1"
								}
								uni.navigateTo({
									url: tourl
								})
							},
							fail: function(err) {
								console.log('fail:', err);
							}
						});
					} else if (this.payType == 30) {
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: res.data.aliPayOrderStr, //支付宝订单数据
							success: (res) => {
								console.log('success:', res);
								uni.navigateTo({
									url: '/pages/product/paysuccess?type=1&price=' + this.price + "&code=" + this.order
								})
							},
							fail: function(err) {
								console.log('fail:', err);
							}
						});
						console.log(JSON.stringify(res.data.resultValue.body))
						uni.navigateTo({
							url:"/pages/product/h5paypage?data="+res.data.resultValue.body
						})
					} else if (this.payType == 10) {

					}
					// #endif
				}
			}
		}
	}
</script>

<style scoped>
	.payall {
		width: 190rpx;
		height: 53rpx;
		line-height: 53rpx;
		margin: 74rpx auto 0;
		font-size: 38rpx;
		font-weight: 400;
		color: #000000;
	}

	.price {
		width: 750rpx;
		height: 112rpx;
		font-size: 80rpx;
		font-weight: bold;
		line-height: 112rpx;
		color: #000000;
		text-align: center;
		margin-bottom: 60rpx;
	}

	.item {
		width: 610rpx;
		margin: 0 auto 65rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.item_middle {
		width: 500rpx;
		height: 53rpx;
		line-height: 53rpx;
		font-size: 38rpx;
		font-weight: 400;
		color: #333333;
		padding-left: 40rpx;
	}

	.payfor {
		width: 610rpx;
		height: 88rpx;
		margin: 320rpx auto 0;
		line-height: 88rpx;
		text-align: center;
		color: #FFFFFF;
		background: linear-gradient(90deg, #F3C44E 0%, #F18D29 53%, #ED6138 100%);
		border-radius: 62rpx;
	}
</style>
